<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>

    username: <input type="text" id="username"> <br>
    age: <input type="text" id="age"> <br>
    gender: <input type="text" id="gender"> <br>
    cat: <span id="cat"></span> <br>

    <div id="hobby">

    </div>

    <hr>
    <div id="hobby2">

    </div>


    <script>

    /*
        json: js中表示java中bean对象的形式
        Java： User(username:"",password:"123",gender:"男")
        js: {username:"",password:"123",gender:"男"}

        JAVA: List<User> {User(username:"",password:"123",gender:"男"),User(username:"",password:"123",gender:"男"),...}
        js: [{},{},{}]
     */

    let user = {
        username:"zhangsan",
        age: 20,
        gender:"男",
        cat: {
            name:"tom",
            age: 2
        },
        hobby: ["java","game","cdm"]
    };

    $("#username").val(user.username);
    $("#age").val(user.age);
    $("#gender").val(user.gender);

    $("#cat").html(user.cat.name + "--" + user.cat.age);

    $.each(user.hobby,function (idx,ele){
        //idx表示遍历到的元素索引  ele表示遍历到的元素
        $("#hobby").append("<div>"+ele+"</div>")
    })

    $("#hobby2").html(user.hobby[0] + "-" + user.hobby[1] + "-" + user.hobby[2] + "-" + user.hobby[3])

    </script>
</body>
</html>